<template>
	<div class="mall_main_list">
		<div class="mall_main_list_content">
			<ul>
				<li v-for="(item, index) in goods" v-if="index % 2 === 0" class="fadeInLeft animated">
					<router-link :to="{name: 'goodsDetail', params:{cid: item.cid, id: item.id}}">
						<div class="mall_main_img">
							<LazyImg src="http://i9.hexunimg.cn/mobile_show/image/20150706/20150706155449_859.png" :dataSrc="item.pic" />
							<span class="mall_main_tags">{{item.tags}}</span>
						</div>
						<div class="mall_main_item">
							<h1>{{index}}-{{item.title}}</h1>
							<p>
								<span class="mall_main_item_price"><del>￥{{item.originalPrice}}</del>￥<i>{{item.price}}</i></span>
								<router-link :to="{name:'goodsSimilarity', params:{cid: item.cid, id: item.id}}" class="mall_main_item_similarity">看相似</router-link>
							</p>
						</div>
					</router-link>
					<router-link :to="{name:'addCart', params:{cid: item.cid, id: item.id}}" class="mall_main_item_addcart"><i>加入购物车</i><i class="icon--"></i></router-link>
				</li>
			</ul>
			<ul>
				<li v-for="(item, index) in goods" v-if="index % 2 !== 0" class="fadeInRight animated">
					<router-link :to="{name: 'goodsDetail', params:{cid: item.cid, id: item.id}}">
						<div class="mall_main_img">
							<LazyImg src="http://i9.hexunimg.cn/mobile_show/image/20150706/20150706155449_859.png" :dataSrc="item.pic" />
							<span class="mall_main_tags">{{item.tags}}</span>
						</div>
						<div class="mall_main_item">
							<h1>{{index}}-{{item.title}}</h1>
							<p>
								<span class="mall_main_item_price"><del>￥{{item.originalPrice}}</del>￥<i>{{item.price}}</i></span>
								<router-link :to="{name:'goodsSimilarity', params:{cid: item.cid, id: item.id}}" class="mall_main_item_similarity">看相似</router-link>
							</p>
						</div>
					</router-link>
					<router-link :to="{name:'addCart', params:{cid: item.cid, id: item.id}}" class="mall_main_item_addcart"><i>加入购物车</i><i class="icon--"></i></router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	import LazyImg from "../../components/common/lazy-img.vue";
	export default{
		name: "MallList",
		props:["goods"],
		data: function(){
			return{

			}
		},
		components:{
			LazyImg
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.mall_main_list{
		margin:0 10/@base 0 10/@base;
		.mall_main_list_content{
			display:flex;
			ul{
				display:block;
				width:50%;
				&:last-child{
					margin-left:10/@base;
				}
				li{
					margin:0 0 20/@base 0;
					background-color: #fff;
					overflow:hidden;
					&:last-child{
						margin:0;
					}
					a{
						color:#000;
						font-size:22/@base;
						&.mall_main_item_addcart{
							background-color: rgb(255, 0, 0);
							color:#fff;
							display:flex;
							padding:20/@base;
							i{
								font-size:22/@base;
								vertical-align: middle;
								font-style: normal;
								width:90%;
								font-weight: 700;
								padding:5/@base 0;
								&.icon--{
									font-weight: 400;
									margin:0 0 0 5/@base;
									padding:10/@base;
									width:20/@base;
									height:20/@base;
									display:inline-block;
									border-radius: 20/@base;
									background-color:#fff;
									color:#000;
									overflow: hidden;
									font-size:14/@base;
									line-height: 20/@base;
									text-align: center;
								}
							}
						}
						div{
							&.mall_main_img{
								position: relative;
								img{
									width:100%;
								}
								span{
									&.mall_main_tags{
										position: absolute;
										bottom:-5/@base;
										left:10/@base;
										font-size:20/@base;
										background-color: rgb(205, 163, 177);
										color:#fff;
										padding:0 5/@base;
									}
								}
							}
							&.mall_main_item{
								padding:10/@base;
								h1{
									font-size:22/@base;
									font-weight: 400;
									height:64/@base;
									overflow: hidden;
								}
								p{
									display: flex;
									margin:20/@base 0 0;
									span{
										&.mall_main_item_price{
											del{
												color:#ccc;
												font-size:20/@base;
												margin-right:10/@base;
											}
											width:70%;
											color:rgb(255, 0, 0);
											i{
												font-size:24/@base;
												font-style: normal;
											}
										}
									}
									a{
										&.mall_main_item_similarity{
											width:30%;
											text-align: center;
											padding:0 5/@base;
											font-size:20/@base;
											border-radius: 5/@base;
											display:block;
											height:26/@base;
											background-color: rgb(255, 230, 235);
											color:rgb(255, 0, 0);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
